/* 
    1.安装vue-router
    2.导入插件
    3.注册插件
    4.实例化
    5.注入new Vue实例配置中
    6.路由出口

    进度条插件
    1.安装nprogresss
    2.导包
    3.用包
*/
// 导包： nprogress的js css
import NProgess from 'nprogress';
import 'nprogress/nprogress.css';
// 2. 导入插件
import VueRouter from 'vue-router';
// 3. 注册插件
import Vue from 'vue';
// import login from '@/views/login/login.vue';
import layout from '@/views/layout/layout.vue';
// import chart from '@/views/layout/chart/chart.vue';
import userList from '@/views/layout/userList/userList.vue';
import question from '@/views/layout/question/question.vue';
import business from '@/views/layout/business/business.vue';
import subject from '@/views/layout/subject/subject.vue';
import store from '@/store/store.js';
import {
    removeLocal
} from '@/utils/local.js';
import {
    Message
} from 'element-ui';
Vue.use(VueRouter);
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
// 4. 实例化
const router = new VueRouter({
    routes: [{
            path: '/',
            redirect: '/login',
        },
        {
            path: '/login',
            component: () => import('@/views/login/login.vue'),
            meta: {
                title: '用户登录',
                roles: ['超级管理员', '管理员', '老师', '学生']
            }
        },
        /* 
            配置子路由出口
            在当前配置路由下，添加一个chidren属性， 该属性的值是一个数组，类似 routes
        */
        {
            path: '/layout',
            component: layout,
            // 重定向： 当用户一登录跳转的路由是'/layout' ,该路由地址下的main盒子里没有任何内容，
            // 所以需要使用重定向将chart组件显示出来
            redirect: '/layout/subject',
            // 切换路由显示对应的标题， 配置路由元信息
            children: [{
                    path: '/layout/chart',
                    // 路由懒加载  用到什么组件就加载什么组件
                    component: () => import('@/views/layout/chart/chart.vue'),
                    meta: {
                        title: '数据概览',
                        roles: ['超级管理员', '管理员', "老师"],
                        icon: 'el-icon-pie-chart',
                    }
                },
                {
                    path: '/layout/userList',
                    component: userList,
                    meta: {
                        title: '用户列表',
                        roles: ['超级管理员', '管理员'],
                        icon: 'el-icon-user'
                    }
                },
                {
                    path: '/layout/question',
                    component: question,
                    meta: {
                        title: '题库列表',
                        roles: ['超级管理员', '管理员', '老师'],
                        icon: 'el-icon-edit-outline'
                    }
                },
                {
                    path: '/layout/business',
                    component: business,
                    meta: {
                        title: '企业列表',
                        roles: ['超级管理员', '管理员', '老师'],
                        icon: 'el-icon-office-building'

                    }
                },
                {
                    path: '/layout/subject',
                    component: subject,
                    meta: {
                        title: '学科列表',
                        roles: ['超级管理员', '管理员', '老师', '学生'],
                        icon: 'el-icon-notebook-2'

                    }
                },
            ]
        },
    ],
})

// 路由导航
// 1.进入目标路由前
router.beforeEach((to, from, next) => {
    NProgess.start();
    //  在每次进入目标路由前判断用户角色
    if (!to.meta.roles.includes(store.state.role)) {
        // store.state.role = '超级管理员';
        Message.warning('您的权限不够')
        // 删除token
        removeLocal();
        next({
            path: '/login'
        })
        // 恢复vuex的角色初始值
        // 使用next('路径')改变跳转的目标路由,无法执行进入目标路由后的钩子函数
        NProgess.done();

    } else {
        next()
    }
})
// 2.进入目标路由后
router.afterEach((to) => {
    // 在进入了目标路由后,修改页面标题
    document.title = to.meta.title
    NProgess.done();
})

// 5. 注入new Vue实例配置中 // 注意 这里需要将路由实例导出
export default router

// 6. 路由出口